<template>
  <view class="page flex-col">
    <view class="group_4 flex-col">
     
      <view class="group_7 flex-row justify-between">
        <view class="box_3 flex-row">
          <view class="image-text_5 flex-row justify-between">
           <uni-data-select class="selected" v-model="value" :localdata="range" @change="change"
           	:style="{ background: '#fff', borderRadius: '10px' }"></uni-data-select>
          </view>
        </view>
        <view class="image-text_6 flex-row justify-between"  @click="clearAndOpenPopup">
          <image
            class="thumbnail_8"
            referrerpolicy="no-referrer"
            src="../../../static/mine-image/btn_collection_add@2x.png"
          />
          <text class="text-group_6" >添加</text>
        </view>
      </view>
    </view>
    <view class="group_2 flex-col" v-for="(item, index) in colletion" :key="index">
      <view class="text-wrapper_17 flex-row justify-between">
        <text class="text_3">名称</text>
        <text class="text_4">{{item.accountName}}</text>
      </view>
      <view class="text-wrapper_18 flex-row justify-between">
        <text class="text_5">手机号码</text>
        <text class="text_6">{{ item.phoneNumber }}</text>
      </view>
      <view class="text-wrapper_19 flex-row justify-between">
        <text class="text_7">账户名称</text>
        <text class="text_8">{{ item.accountName }}</text>
      </view>
      <view class="text-wrapper_20 flex-row justify-between">
        <text class="text_9">账户</text>
        <text class="text_10">{{ item.account }}</text>
      </view>
      <view class="text-wrapper_21 flex-row justify-between">
        <text class="text_11">开户银行</text>
        <text class="text_12">{{  item.openingBank }}</text>
      </view>
      <view class="text-wrapper_23 flex-row justify-between">
        <text class="text_15">银行分行</text>
        <text class="text_16">{{ item.bankBranch }}</text>
      </view>
      <view class="text-wrapper_24 flex-row justify-between">
        <text class="text_17">账户类型</text>
        <text class="text_18">{{ item.accountType === '0' ? '银行卡' : '支付宝' }}</text>
      </view>
      <view class="section_1 flex-col"></view>
      <view class="box_4 flex-row justify-between">
        <view class="image-text_7 flex-row justify-between" @click="modify(item,true)">
          <image
            class="thumbnail_2"
            referrerpolicy="no-referrer"
            src="../../../static/mine-image/btn_collection_edit@2x.png"
          />
          <text class="text-group_1" >编辑</text>
        </view>
        <view class="image-text_8 flex-row justify-between" @click.stop="deleteA(item)">
          <image
            class="thumbnail_3"
            referrerpolicy="no-referrer"
            src="../../../static/mine-image/btn_collection_del@2x.png"
          />
          <text class="text-group_2">删除</text>
        </view>
      </view>
    </view>
	<uni-popup ref="popup" type="bottom">
		<view style="width: 100%;background-color: #fff;padding: 30rpx;box-sizing: border-box;">
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>银行账号</view>
				<input v-model="account" style="text-align: right;font-size: 26rpx;" type="text"
					placeholder="请输入银行账号">
			</view>
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>银行名称</view>
				<input v-model="openingBank" style="text-align: right;font-size: 26rpx;" type="text"
					placeholder="请输入银行名称">
			</view>
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>银行地址</view>
				<input v-model="bankBranch" style="text-align: right;font-size: 26rpx;" type="text"
					placeholder="请输入银行地址">
			</view>
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>真实姓名</view>
				<input v-model="accountName" style="text-align: right;font-size: 26rpx;" type="text"
					placeholder="请输入真实姓名">
			</view>
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>手机号</view>
				<input v-model="phoneNumber" style="text-align: right;font-size: 26rpx;" type="number"
					maxlength="11" placeholder="请输入手机号">
			</view>
			<view
				style="height: 80rpx;border-bottom: 1rpx solid #f7f6fa;display: flex;width: 100%;justify-content: space-between;align-items: center;">
				<view>类型</view>
				<picker mode="selector" :range="range" range-key="text" @change="changeSelect">
					<input v-model="accountTypeLabel" style="text-align: right;font-size: 26rpx;" type="text"
						placeholder="请选择类型">
				</picker>
			</view>
			<view style="display: flex;justify-content: center;margin-top: 30rpx;">
				<view @click="submit"
					style=" text-align: center; line-height: 80rpx; border-radius: 10rpx; color: #fff; width: 500rpx;height: 80rpx;background-color: #ff5543;">
					保存</view>
			</view>
		</view>
	</uni-popup>
  </view>
</template>
<script>
	import {
		getToken
	} from '@/utils/auth'
	import {
		getUserProfile,
		addBank,
		getColletion,
		editcolletion,
		deBank,
		putBank,
		getInfos
	} from "@/api/system/user"
import { logout } from '../../../api/login';
	export default {
		data() {
			return {
				account: '',
				openingBank: '',
				bankBranch: '',
				accountName: '',
				phoneNumber: '',
				accountType: '',
				accountTypeLabel: '',
				    editingItemId: null, // 当前编辑的列表项的id

				user: {},
				colletion: [], //查看我的缴费记录
				selectedAccountType: "0", // 选中的账户类型，默认为银行卡
				value: '0',
				range: [
					{
						value: '1',
						text: '支付宝'
					},
					{
						value: '0',
						text: '银行卡'
					}
				],
				id: '',
				  editingItemId: -1// 当前编辑项的id
			}
		},
		onLoad() {

		},
		mounted() {
			 this.$refs.popup = this.$refs["popup"];
			 console.log('mmmmm', this.$refs);
			 this.modify(item)
		},
		onReady() {
			this.getUser()
		},
		methods: {
			 clearAndOpenPopup() {
			   this.editingItemId = ''
			   this.account = ''
			   this.openingBank = ''
			   this.bankBranch = ''
			   this.accountName = ''
			   this.phoneNumber = ''
			   this.accountType = ''
			    this.id = ''  // 清空this.id的值

			    // // 其他字段清空
			    this.$refs.popup.open('bottom')
			  },
		
		deleteA(item) {
		  deBank(item.id).then(res => {
		    this.getUser();
		  });
		},
		
		modify(item) {
		    this.editingItemId = item.id;
		    const id = item.id;
		    console.log(item.id);
		  
		    getInfos(id).then(res => {
		      console.log('0000000', res);
		      console.log(this.colletion);
		      const m = this.colletion;
		  
		      // 将返回的详细信息赋值给对应的表单字段
		      for (let i = 0; i < m.length; i++) {
		        const currentItem = m[i];
		  
		        if (currentItem.account !== undefined) {
		          this.account = currentItem.account;
		          // break;
		        }
		  
		        if (currentItem.openingBank !== undefined) {
		          this.openingBank = currentItem.openingBank;
		          // break;
		        } 
		  
		        if (currentItem.bankBranch !== undefined) {
		          this.bankBranch = currentItem.bankBranch;
		          // break;
		        }
		  
		        if (currentItem.accountName !== undefined) {
		          this.accountName = currentItem.accountName;
		          // break;
		        } 
		  
		        if (currentItem.phoneNumber !== undefined) {
		          this.phoneNumber = currentItem.phoneNumber;
		          // break;
		        } 
		  
		        if (currentItem.accountType !== undefined) {
		          this.accountType = currentItem.accountType;
		        }
		      }
		  
		      console.log('jjjjjj', this.account);
		      this.accountTypeLabel = (res && res.accountType) === 1 ? '银行卡' : '支付宝';
		      console.log('llvvvvv', this.accountTypeLabel);
		  
		      // 将修改项的id赋值给this.editingItemId
		      this.editingItemId = item.id;
		  
		      this.$refs.popup.open('bottom');
		    }).catch(error => {
		      console.error(error);
		    });
		},
		
		submit() {
			  let accountType = this.accountType; // 获取 this.accountType 的值

		     if (this.editingItemId) {
		        // 更新已存在的项
		        let index = this.colletion.findIndex(item => item.id === this.editingItemId);
		        if (index !== -1) {
		          this.colletion[index] = {
		            ...this.colletion[index],
		            account: this.account,
		            openingBank: this.openingBank,
		            bankBranch: this.bankBranch,
		            accountName: this.accountName,
		            phoneNumber: this.phoneNumber,
		            accountType: this.accountType
		          };
		        }
		    
		        uni.showToast({
		          title: '修改成功',
		          icon: 'none'
		        });
		    
		        this.$refs.popup.close();
		        this.editingItemId = '';
		        this.account = '';
		        this.openingBank = '';
		        this.bankBranch = '';
		        this.accountName = '';
		        this.phoneNumber = '';
		        this.accountType = '';
		        if (this.accountType === 1) {
		          this.accountTypeLabel = '银行卡';
		        } else {
		          this.accountTypeLabel = '支付宝';
		        }
		    
		        // 发送请求
		        putBank(this.colletion[index])
		          .then(response => {
					  console.log('vvvvv',this.colletion[index].accountType)
		            if (response.code === 200) {
		              uni.showToast({
		                title: '修改成功',
		                icon: 'none'
		              });
		        
		              this.$refs.popup.close();
		              this.editingItemId = '';
		        
		              // 清空表单数据
		              this.account = '';
		              this.openingBank = '';
		              this.bankBranch = '';
		              this.accountName = '';
		              this.phoneNumber = '';
						// 初始化数据时，为每一项添加 accountType 属性
						this.colletion.forEach(item => {
						  item.accountType = ''; // 初始值为空字符串
						});
		             if (this.accountType === '0') {
		               this.colletion[index].accountType = '1'; // 将 accountType 设为 '1' 表示支付宝
		             } else if (this.accountType === '1'){
		               this.colletion[index].accountType = '2'; // 将 accountType 设为 '2' 表示银行卡
		             }
		            }
		          })
		          .catch(error => {
		            console.error(error);
		          });
		      } else {
		        let obj = {
					 account: this.account,
		               openingBank: this.openingBank,
		               bankBranch: this.bankBranch,
		               accountName: this.accountName,
		               phoneNumber: this.phoneNumber,
		               accountType: accountType, // 使用获取到的 accountType 值
		               userId: this.user['userId'],
		               id: this.id // 确保正确设置了id值
		        };
		    
		        // 发送请求
		        addBank(obj)
		          .then(response => {
		            if (response.code === 200) {
		              uni.showToast({
		                title: '添加成功',
		                icon: 'none'
		              });
		    
		              this.$refs.popup.close();
		              this.getUser();
		              this.account = '';
		              this.openingBank = '';
		              this.bankBranch = '';
		              this.accountName = '';
		              this.phoneNumber = '';
		              this.accountType = '';
		              if (this.accountType === 1) {
		                this.accountTypeLabel = '银行卡';
		              } else {
		                this.accountTypeLabel = '支付宝';
		              }
		            }
		          })
		          .catch(error => {
		            console.error(error);
		          });
		      }
		},
			changeSelect(e) {
				this.accountTypeLabel = this.range[e.detail.value].text
				this.accountType = this.range[e.detail.value].value
			},
			getUser(type = "0") {
				getUserProfile().then(response => {
					this.user = response.data
					// console.log(this.user)
					let jsonData = {
						userId: this.user['userId'],
						accountType: type,
					};
					getColletion(jsonData).then(response => {
						this.colletion = response // 如果是对象，将其放入数组
						console.log(this.colletion)
						  for (let i = 0; i < this.colletion.length; i++) {
						    let item = this.colletion[i]
						    this.editingItemId = item.id
						    // 执行其他操作，如调用修改函数等
						    this.modify(item)
						  }
					})
				})
			},
			change(value) {
				console.log(value)
				this.getUser(value)
			},
		},

	}
</script>
<style>
	@import url("../../common/common.css");
	::v-deep .uni-select{
		width: 120px;
		background-color: rgba(41, 167, 244, 1);
		text-align: center;
		border-radius: 15px;
	}
	::v-deep .uni-select__input-text{
		color: #fff;
	}
</style>
<style lang="scss" scoped>
	.page {
	  background-color: rgba(246, 247, 251, 1);
	  position: relative;
	  width: 100vw;
	  height: 100vh;
	  // overflow: hidden;
	  .group_4 {
	    padding: 14px 14px 16px 16px;
	    .group_7 {
	      width: 335px;
	      margin: 21px 6px 0 4px;
	      .box_3 {
	        border-radius: 8px;
	        .image-text_5 {
	          width: 70px;
	          .text-group_5 {
	            overflow-wrap: break-word;
	            color: rgba(255, 255, 255, 1);
	            font-size: 16px;
	            font-weight: NaN;
	            text-align: center;
	            white-space: nowrap;
	            line-height: 22px;
	          }
	          .thumbnail_7 {
	            width: 14px;
	            height: 8px;
	            margin: 7px 0 7px 0;
	          }
	        }
	      }
	      .image-text_6 {
	        width: 58px;
	        margin: 6px 0 6px 0;
	        .thumbnail_8 {
	          width: 20px;
	          height: 20px;
	          margin: 1px 0 1px 0;
	        }
	        .text-group_6 {
	          overflow-wrap: break-word;
	          color: rgba(34, 34, 34, 1);
	          font-size: 16px;
	          font-family: PingFangSC-Semibold;
	          font-weight: 600;
	          text-align: center;
	          white-space: nowrap;
	          line-height: 22px;
	        }
	      }
	    }
	  }
	  .group_2 {
	    background-color: rgba(255, 255, 255, 1);
	    border-radius: 8px;
	    width: 335px;
	    align-self: center;
	    margin-top: 10px;
	    padding: 15px 15px 15px 15px;
	    .text-wrapper_17 {
	      width: 305px;
	      .text_3 {
	        overflow-wrap: break-word;
	        color: rgba(34, 34, 34, 1);
	        font-size: 15px;
	        font-family: PingFangSC-Semibold;
	        font-weight: 600;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 21px;
	      }
	      .text_4 {
	        overflow-wrap: break-word;
	        color: rgba(34, 34, 34, 1);
	        font-size: 15px;
	        font-family: PingFangSC-Semibold;
	        font-weight: 600;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 21px;
	      }
	    }
	    .text-wrapper_18 {
	      width: 305px;
	      margin-top: 8px;
	      .text_5 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_6 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_19 {
	      width: 305px;
	      margin-top: 8px;
	      .text_7 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_8 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_20 {
	      width: 305px;
	      margin-top: 8px;
	      .text_9 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_10 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_21 {
	      width: 305px;
	      margin-top: 8px;
	      .text_11 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_12 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_22 {
	      width: 305px;
	      margin-top: 8px;
	      .text_13 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_14 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_23 {
	      width: 305px;
	      margin-top: 8px;
	      .text_15 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_16 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .text-wrapper_24 {
	      width: 305px;
	      margin-top: 8px;
	      .text_17 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: left;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	      .text_18 {
	        overflow-wrap: break-word;
	        color: rgba(102, 102, 102, 1);
	        font-size: 14px;
	        font-weight: NaN;
	        text-align: right;
	        white-space: nowrap;
	        line-height: 20px;
	      }
	    }
	    .section_1 {
	      background-color: rgba(245, 245, 245, 1);
	      width: 305px;
	      height: 1px;
	      margin-top: 15px;
	    }
	    .box_4 {
	      width: 211px;
	      align-self: center;
	      margin-top: 15px;
	      .image-text_7 {
	        width: 55px;
	        .thumbnail_2 {
	          width: 15px;
	          height: 16px;
	          margin: 3px 0 3px 0;
	        }
	        .text-group_1 {
	          overflow-wrap: break-word;
	          color: rgba(41, 167, 244, 1);
	          font-size: 16px;
	          font-weight: NaN;
	          text-align: center;
	          white-space: nowrap;
	          line-height: 22px;
	        }
	      }
	      .image-text_8 {
	        width: 55px;
	        .thumbnail_3 {
	          width: 15px;
	          height: 16px;
	          margin: 3px 0 3px 0;
	        }
	        .text-group_2 {
	          overflow-wrap: break-word;
	          color: rgba(244, 41, 41, 1);
	          font-size: 16px;
	          font-weight: NaN;
	          text-align: center;
	          white-space: nowrap;
	          line-height: 22px;
	        }
	      }
	    }
	  }
	  .image_4 {
	    width: 375px;
	    height: 34px;
	    margin-top: 16px;
	  }
	}
	// .inviter-container {
	// 	padding: 15px 0 0 10px;

	// 	.select {
	// 		width: 120px;
	// 		height: 30px;
	// 		border-radius: 10px;
	// 	}
	// }

	// .select-item {
	// 	margin-top: 10px;
	// 	margin-left: 10px;
	// 	position: relative;

	// 	.code {
	// 		background-color: #181e3e;
	// 		position: absolute;
	// 		left: 120px;
	// 		top: 0px;
	// 		display: flex;
	// 		justify-content: center;
	// 		align-items: center;
	// 		width: 100%;
	// 		/* 使容器宽度占满父元素，实现左右居中 */
	// 		height: 100vh;
	// 		/* 使容器高度占满视口，实现上下居中 */
	// 		font-size: 10px;
	// 		// border: 1px solid #ccc;
	// 		width: 130px;
	// 		height: 30px;
	// 		text-align: center;
	// 		color: #fff;
	// 		border-radius: 5px;
	// 		margin-left: 10px;
	// 	}
	// }

	// .selected {
	// 	width: 120px;
	// 	height: 30px;
	// 	border-radius: 10px;

	// }

	// .card-item {
	// 	color: #e6ebf0;
	// 	display: flex;
	// 	justify-content: space-between;
	// }

	// .ipt .uni-popup {
	// 	position: absolute;
	// 	top: 50%;
	// 	left: 50%;
	// 	transform: translate(-50%, -50%);
	// 	background-color: #fff;
	// 	width: 300px;
	// 	height: 300px;
	// 	padding: 10px;
	// }

	// .white-popup {
	// 	.input-item {
	// 		display: flex;
	// 		position: fixed;
	// 		top: 30px;
	// 		left: 10px;
	// 		right: 20px;

	// 		.input {
	// 			padding: 5px 2px;
	// 			background-color: #fff;
	// 		}
	// 	}

	// 	.select-item {
	// 		position: fixed;
	// 		top: 60px;
	// 		left: 10px;

	// 		.select {
	// 			display: flex;
	// 			position: absolute;
	// 			left: 60px;
	// 			width: 100px;
	// 			height: 30px;

	// 			.select-i {
	// 				margin-left: 10px;
	// 				background-color: #fff;
	// 			}
	// 		}
	// 	}

	// 	.btn-item {
	// 		position: fixed;
	// 		bottom: 20px;
	// 		right: 15px;

	// 		.btn1 {
	// 			position: absolute;
	// 			width: 40px;
	// 			height: 30px;
	// 		}
	// 	}
	// }

	// .select-item {
	// 	.select {
	// 		width: 300px;
	// 		position: relative;

	// 		.select-i {
	// 			// position: absolute;

	// 		}
	// 	}
	// }

	// uni-checkbox-group {
	// 	display: inline;
	// }

	// uni-select {
	// 	position: relative;
	// 	left: 200px;
	// 	background-color: #fff;
	// }

	// .uni-card {
	// 	 background: linear-gradient(90deg, #855ef9 0%, #855ef9 39%, #e67537 100%);
	// 	color: #fff;
	// }
</style>